<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css"/>
</head>
<body>
    <h1>The Brand Page</h1>
    <!--查询 方式二 获取name值 基于JS方式提交-->
    <form method="post">
        <div class="form-group">
            <input type="text" name="name" class="form-control" placeholder="Brand Name">
            <input type="button" class="btn btn-primary" onclick="doSearch()" value="查询">
            <button type="button" class="btn btn-primary" th:onclick="doAdd()">添加</button>
        </div>
    </form>
    <!--查询  方式一 传统url方式-->
   <!-- <form th:action="@{/brand/doFindBrands}" method="post">
        <input type="text" name="name">
        <input type="submit" value="查询">
    </form>-->
    <table class="table table-bordered">
        <thead>
            <!--<a th:href="@{/brand/doBrandAddUI}">添加商品</a>-->
        <tr>
            <th>id</th>
            <th>name</th>
            <th>remark</th>
            <th>createdTime</th>
            <th>删除</th>
            <th>修改</th>
        </tr>
        </thead>
        <tbody>
        <!--th:each 是thymeleaf中定义的用于迭代集合的一个循环标签属性-->
        <tr th:each="brand: ${list}"><!--list来controller中的model-->
            <td th:text="${brand.id}">10</td><!--th:text 是呈现文本时的一种标签属性-->
            <td th:text="${brand.name}">AAA</td>
            <td th:text="${brand.remark}">remark</td>
            <td th:text="${#dates.format(brand.createdTime,'yyyy/MM/dd HH:mm')}">2020/10/11</td>
            <td>
                <button type="button" class="btn btn-danger" th:onclick="doDeleteById([[${brand.id}]])">删除</button>
            </td>
           <!--<td><a th:href="@{/brand/doDeleteBrands/{id}(id=${brand.id})}">删除</a></td>-->
           <!-- <td><a th:href="@{/brand/doUpdateById/{id}(id=${brand.id})}">修改</a></td>-->
            <td>
                <button type="button" class="btn btn-info" th:onclick="doUpdateById([[${brand.id}]])">修改</button>
            </td>
        </tr>
        </tbody>
    </table>

    <script>
        /*查询*/
        function doSearch() {
            /*JS中var 定义全局变量  let定义局部   ``反引号-->模板字符串*/
            let name=document.forms[0].name.value;
            console.log("name",name);
            let url=`http://localhost:8080/brand/doFindBrands/${name}`;
            //访问对应的url
            location.href=url;
        }
        /*删除*/
        function doDeleteById(id) {
            if (!confirm("您确认删除吗"))return;//confirm为浏览器中window对象的函数
            /*console.id;*/
            location.href=`http://localhost:8080/brand/doDeleteBrands/${id}`;
        }
        /*添加*/
        function doAdd() {
            location.href="/brand/doBrandAddUI";
        }
        /*修改*/
        function doUpdateById(id) {
            location.href=`http://localhost:8080/brand/doUpdateById/${id}`;
        }
    </script>
</body>
</html>